<!--  -->
<template>
  <div class="container">
    <div class="pannel">
      <!-- <van-tabs v-model="active" animated color="black" swipeable>
        <van-tab title='简介' style="font-size: 0.3rem;" name="a">
          <div class="txt">
        <span>
           <span v-if="desc.length < maxLen">
            <span class="tj">{{ this.desc }}</span>
          </span>
          <span v-else>
            <span class="tj">{{ showBtn ? sliceStr : this.desc }}
              <span class="btnWord"  @click="showBtn = !showBtn">{{ showBtn ? "全文" : "收起" }}</span>
            </span>
          </span>
        </span>
      </div>
        </van-tab>
        <van-tab title='推荐' name="b">
          内容
        </van-tab>
        <van-tab title='影评' name="c">
          内容
        </van-tab>
      </van-tabs> -->
        <el-tabs v-model="activeName" @tab-click="handleClick" lazy="true" stretch>
    <el-tab-pane label="简介" name="first"><div class="txt">
        <span>
           <span v-if="desc.length < maxLen">
            <span class="tj">{{ this.desc }}</span>
          </span>
          <span v-else>
            <span class="tj">{{ showBtn ? sliceStr : this.desc }}
              <span class="btnWord"  @click="showBtn = !showBtn">{{ showBtn ? "全文" : "收起" }}</span>
            </span>
          </span>
        </span>
      </div>
      </el-tab-pane>
    <el-tab-pane label="推荐" name="second">内容</el-tab-pane>
    <el-tab-pane label="影评" name="third">内容</el-tab-pane>
  </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "text-box",
  data() {
    return {
      activeName:"first",
      showBtn: true,
      maxLen: {
        type: Number,
        default: 20
      },
    };
  },

  mounted() {
    // 判断是否显示展开收起按钮

  },
  props: {
    content: {
      type: String,

    }
  },
  computed: {
    ...mapState({
      desc: (state) => state.Detail.Detail.desc
    }),
    sliceStr() {
      
      if (this.desc != null) {
        return this.desc.substring(0, 50) + "...";

      }
      return '';
    }
  },
  methods:{
     switch(){
      this.showBtn=!showBtn
     }
  }
  }
</script>
<style lang='less' scoped>
.container {
  background: #eee;
  padding-top: 0.1rem;

  margin-top: 0.5rem;

  .pannel {
    padding: 0.1rem;
    background: white;
  }
}



div {
  
  h1 {
    font-size: 0.35rem;
    border-top: solid #eee 0.01rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
  }
}

.container {
  border-top: solid rgb(238,238,238,1) 0.01rem;
}

.txt {
  line-height:0.5rem;
  letter-spacing: 0.02rem;
  word-break: break-all;
  line-height: 0.5rem;
  padding:0.2rem 0.44rem 0.45rem 0.44rem;
  font-size: 0.33rem;
}

.tj {
  text-align: justify;
}

.btnWord {
  color: cornflowerblue;
  cursor: pointer;
  word-break: keep-all;
}
.pannel/deep/
    .el-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: 0.45rem !important;
    height: 2px;
    background-color: #000;
    z-index: 1;
    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
    list-style: none;
    width: 1rem !important;
}



</style>